<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>风险历史记录</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        .history-item {
            border-left: 3px solid #6c757d;
            padding-left: 15px;
            margin-bottom: 20px;
            position: relative;
        }
        .history-item:before {
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            background-color: #fff;
            border: 3px solid #6c757d;
            border-radius: 50%;
            left: -9px;
            top: 0;
        }
        .history-item.type-1 { border-left-color: #28a745; }
        .history-item.type-1:before { border-color: #28a745; }
        .history-item.type-2 { border-left-color: #007bff; }
        .history-item.type-2:before { border-color: #007bff; }
        .history-item.type-3 { border-left-color: #fd7e14; }
        .history-item.type-3:before { border-color: #fd7e14; }
        .history-item.type-4 { border-left-color: #6f42c1; }
        .history-item.type-4:before { border-color: #6f42c1; }
        .history-item.type-5 { border-left-color: #dc3545; }
        .history-item.type-5:before { border-color: #dc3545; }
        .history-time {
            color: #6c757d;
            font-size: 0.9rem;
        }
        .history-operator {
            font-weight: bold;
        }
        .history-change {
            margin-top: 5px;
        }
        .badge-before {
            text-decoration: line-through;
            opacity: 0.7;
        }
        .badge-arrow {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div class="container mt-4">
        <div class="row mb-3">
            <div class="col">
                <h2>风险历史记录</h2>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a th:href="@{/project/list}">项目列表</a></li>
                        <li class="breadcrumb-item"><a th:href="@{/risk/project/{id}(id=${risk.projectId})}">项目风险</a></li>
                        <li class="breadcrumb-item"><a th:href="@{/risk/{id}(id=${risk.id})}">风险详情</a></li>
                        <li class="breadcrumb-item active" aria-current="page">历史记录</li>
                    </ol>
                </nav>
            </div>
        </div>
        
        <div class="row mb-3">
            <div class="col">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">风险信息</h5>
                        <a th:href="@{/risk/{id}(id=${risk.id})}" class="btn btn-sm btn-secondary">
                            <i class="fa fa-arrow-left"></i> 返回风险详情
                        </a>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <p><strong>风险标题:</strong> <span th:text="${risk.title}"></span></p>
                                <p><strong>风险级别:</strong> 
                                    <span th:if="${risk.level == 1}" class="badge badge-info">低</span>
                                    <span th:if="${risk.level == 2}" class="badge badge-warning">中</span>
                                    <span th:if="${risk.level == 3}" class="badge badge-danger">高</span>
                                </p>
                            </div>
                            <div class="col-md-6">
                                <p><strong>状态:</strong>
                                    <span th:if="${risk.status == 1}" class="badge badge-secondary">已识别</span>
                                    <span th:if="${risk.status == 2}" class="badge badge-primary">已分析</span>
                                    <span th:if="${risk.status == 3}" class="badge badge-info">已计划</span>
                                    <span th:if="${risk.status == 4}" class="badge badge-warning">已处理</span>
                                    <span th:if="${risk.status == 5}" class="badge badge-success">已解决</span>
                                </p>
                                <p><strong>创建时间:</strong> <span th:text="${#dates.format(risk.createTime, 'yyyy-MM-dd HH:mm:ss')}"></span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0">历史变更记录</h5>
                    </div>
                    <div class="card-body">
                        <div th:if="${histories.empty}" class="text-center py-4">
                            <i class="fa fa-history fa-3x text-muted mb-3"></i>
                            <p>暂无历史记录</p>
                        </div>
                        
                        <div class="history-timeline">
                            <div th:each="history : ${histories}" th:class="'history-item type-' + ${history.operationType}">
                                <div class="history-time" th:text="${#dates.format(history.createTime, 'yyyy-MM-dd HH:mm:ss')}"></div>
                                <div class="history-operator" th:text="${history.operatorUsername}"></div>
                                
                                <div class="history-content">
                                    <!-- 创建风险 -->
                                    <div th:if="${history.operationType == 1}">
                                        <strong>创建了风险</strong>
                                        <div class="history-change">
                                            <div th:if="${history.afterStatus != null}">
                                                <span>状态: </span>
                                                <span th:if="${history.afterStatus == 1}" class="badge badge-secondary">已识别</span>
                                                <span th:if="${history.afterStatus == 2}" class="badge badge-primary">已分析</span>
                                                <span th:if="${history.afterStatus == 3}" class="badge badge-info">已计划</span>
                                                <span th:if="${history.afterStatus == 4}" class="badge badge-warning">已处理</span>
                                                <span th:if="${history.afterStatus == 5}" class="badge badge-success">已解决</span>
                                            </div>
                                            <div th:if="${history.afterLevel != null}">
                                                <span>风险级别: </span>
                                                <span th:if="${history.afterLevel == 1}" class="badge badge-info">低</span>
                                                <span th:if="${history.afterLevel == 2}" class="badge badge-warning">中</span>
                                                <span th:if="${history.afterLevel == 3}" class="badge badge-danger">高</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 更新状态 -->
                                    <div th:if="${history.operationType == 2}">
                                        <strong>更新了风险状态</strong>
                                        <div class="history-change">
                                            <span th:if="${history.beforeStatus == 1}" class="badge badge-secondary badge-before">已识别</span>
                                            <span th:if="${history.beforeStatus == 2}" class="badge badge-primary badge-before">已分析</span>
                                            <span th:if="${history.beforeStatus == 3}" class="badge badge-info badge-before">已计划</span>
                                            <span th:if="${history.beforeStatus == 4}" class="badge badge-warning badge-before">已处理</span>
                                            <span th:if="${history.beforeStatus == 5}" class="badge badge-success badge-before">已解决</span>
                                            
                                            <span class="badge-arrow"><i class="fa fa-arrow-right"></i></span>
                                            
                                            <span th:if="${history.afterStatus == 1}" class="badge badge-secondary">已识别</span>
                                            <span th:if="${history.afterStatus == 2}" class="badge badge-primary">已分析</span>
                                            <span th:if="${history.afterStatus == 3}" class="badge badge-info">已计划</span>
                                            <span th:if="${history.afterStatus == 4}" class="badge badge-warning">已处理</span>
                                            <span th:if="${history.afterStatus == 5}" class="badge badge-success">已解决</span>
                                        </div>
                                    </div>
                                    
                                    <!-- 更新责任人 -->
                                    <div th:if="${history.operationType == 3}">
                                        <strong>更新了风险责任人</strong>
                                        <div class="history-change">
                                            <span th:text="${history.beforeOwnerId != null ? '从: ' + history.beforeOwnerId : '从: 未指定'}"></span>
                                            <span class="badge-arrow"><i class="fa fa-arrow-right"></i></span>
                                            <span th:text="${history.afterOwnerId != null ? '到: ' + history.afterOwnerId : '到: 未指定'}"></span>
                                        </div>
                                    </div>
                                    
                                    <!-- 更新风险级别 -->
                                    <div th:if="${history.operationType == 4}">
                                        <strong>更新了风险级别</strong>
                                        <div class="history-change">
                                            <span th:if="${history.beforeLevel == 1}" class="badge badge-info badge-before">低</span>
                                            <span th:if="${history.beforeLevel == 2}" class="badge badge-warning badge-before">中</span>
                                            <span th:if="${history.beforeLevel == 3}" class="badge badge-danger badge-before">高</span>
                                            
                                            <span class="badge-arrow"><i class="fa fa-arrow-right"></i></span>
                                            
                                            <span th:if="${history.afterLevel == 1}" class="badge badge-info">低</span>
                                            <span th:if="${history.afterLevel == 2}" class="badge badge-warning">中</span>
                                            <span th:if="${history.afterLevel == 3}" class="badge badge-danger">高</span>
                                        </div>
                                    </div>
                                    
                                    <!-- 删除风险 -->
                                    <div th:if="${history.operationType == 5}">
                                        <strong>删除了风险</strong>
                                    </div>
                                    
                                    <div class="history-remark mt-2" th:if="${history.remark != null}">
                                        <small th:text="${history.remark}"></small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html> 